<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <a-button @click="add" type="primary">
            <a-icon type="plus-circle" />添加资料目录
          </a-button>
        </el-button-group>
      </div>
      <a-drawer
        :title="title+'文件'"
        placement="right"
        :closable="false"
        @close="visible = false"
        :visible="visible"
        width="450"
      >
        <el-form
          :model="teteacherproposal"
          ref="teteacherproposal"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="teteacherproposal.name"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="teteacherproposal.paixu"></el-input-number>
          </el-form-item>
          <el-form-item label="标签" prop="tag">
            <el-select
              v-model="tag"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择文章标签"
            >
              <el-option label="乐高积木" value="乐高积木"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="介绍" prop="info">
            <el-input v-model="teteacherproposal.info"></el-input>
          </el-form-item>
          <el-form-item label="上级id" prop="pid">
            <el-select v-model="teteacherproposal.pid">
              <el-option label="顶级" value></el-option>
              <el-option
                v-for="(item,i) in getTeacherproposal"
                :key="`${i}teteacherproposal1`"
                :label="item.name"
                :value="item.ID"
                v-show="item.ID != teteacherproposal.ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提交">
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
      </a-drawer>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table
        :data="data.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        border
        style="width: 100%"
        row-key="ID"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="ID" sortable label="ID" width="100"></el-table-column>
        <el-table-column prop="paixu" sortable label="排序" width="100"></el-table-column>
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column prop="pid" label="上级ID" width="100"></el-table-column>
        <el-table-column prop="tag" label="标签"></el-table-column>
        <el-table-column prop="info" label="简介"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button class="position-relative">
              <router-link
                :to="{ name:'查看教师资料', params: { ID: scope.row.ID } }"
                class="stretched-link"
                :disabled="scope.row.children!='' "
              >查看</router-link>
            </el-button>
            <el-button @click="upRow(scope.row)" type="text">修改</el-button>
            <el-button @click="deleteRow(scope.row.ID)" type="text">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import { mapGetters } from "vuex";
import {
  asynccreateteacherproposal,
  asyncupdateteacherproposal,
  asyncdelteacherproposal
} from "@/plugins/api.js";
import adminContentFooter from "@/components/admin/admin-content-footer.vue";

export default {
  name: "teteacherproposal",
  data() {
    return {
      pagesize: 9,
      currentPage: 1,
      loading3: false,
      tag: [],
      paths: [
        {
          name: "教师课程",
          path: "/teacher/index"
        }
      ],
      disabled: true,
      teteacherproposal: {
        ID: "",
        name: "",
        info: "",
        pid: null,
        tag: "",
        paixu: 1
      },
      visible: false,
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }]
      },
      title: "添加"
    };
  },
  computed: {
    ...mapGetters(["getTeacherproposal"]),
    data() {
      const { getTeacherproposal } = this;
      const d = JSON.parse(JSON.stringify(getTeacherproposal));
      function a(x, id) {
        let arr = [];
        for (let v in x) {
          if (x[v].pid == id) {
            x[v].children = a(x, x[v].ID);
            arr.push(x[v]);
          }
        }
        return arr;
      }
      return a(d, null);
    }
  },
  watch: {
    tag(v) {
      this.teteacherproposal.tag = v.join(",");
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    async submit() {
      this.$refs["teteacherproposal"].validate(async valid => {
        if (valid) {
          console.log('成功')
          try {
            if (!this.teteacherproposal.ID) {
              await asynccreateteacherproposal(this.teteacherproposal);
            } else {
              await asyncupdateteacherproposal(this.teteacherproposal);
            }
            this.$store.dispatch("actionTeacherproposal");
            // this.start();
            this.visible = false;
            this.$message({
              type: "success",
              message: `${this.title}成功!`
            });
          } catch (err) {
            this.$message({
              type: "error",
              message: `${this.title}失败!`

            });
            console.log(err)
          }
        } else {
          return false;
        }
      });

    },
    /* submit(){
      console.log('添加成功')
    }, */
    async deleteRow(ID) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await asyncdelteacherproposal({ ID });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.$store.dispatch("actionTeacherproposal");
          // this.start();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add() {
      this.tag = [];
      this.teteacherproposal = {
        ID: "",
        name: "",
        info: "",
        pid: null,
        tag: "",
        paixu: 1
      };
      this.visible = true;
      this.title = "添加";
    },
    upRow(index) {
      this.teteacherproposal = JSON.parse(JSON.stringify(index));
      if (this.teteacherproposal.tag === null) {
        this.tag = [];
      } else {
        this.tag = this.teteacherproposal.tag.split(",");
      }
      this.visible = true;
      this.title = "修改";
    }
  },
  components: {
    adminContentFooter
  }
};
</script>
